<template>
  <div v-if="detail" class="rypage container">
    <h1>
      {{ title }}
      <p>{{ detail.utime | dateFormat }}</p>
    </h1>
    <div class="body" v-html="contentHtml"></div>
  </div>
</template>
<script>
import { isEn, escapeHtml } from '@/common/util';
import { getContentData } from '@/service/getData.js'

export default {
  data() {
    return {
      detail: null
    }
  },
  props: {
    detailId: {
      type: String,
      default: ''
    }
  },
  mounted() {
  },
  watch: {
    detailId(newVal) {
      if (newVal) {
        this.getContent(newVal)
      }
    }
  },
  computed: {
    title() {
      return isEn() ? this.detail.title_en : this.detail.title
    },
    subTitle() {
      return isEn() ? this.detail.extra_en : this.detail.extra
    },
    contentHtml() {
      return isEn() ? escapeHtml(this.detail.content_en) : escapeHtml(this.detail.content)
    }
  },
  methods: {
    async getContent(detailId) {
      if (!detailId) return
      let res = await getContentData(detailId)
      if (res) {
        this.detail = res
        this.$emit('getSecCateId', this.detail.sec_cate_id || '')
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.rypage h1 {
  font-size: 17px;
  line-height: 30px;
  position: relative;
  color: #303030;
  width: 100%;
  display: block;
  text-align: center;
  padding: 0px 0 30px;
  border-bottom: 1px solid #e5e5e5;
}

.body {
  padding-top: 40px;
  margin-bottom: 60px;
  color: #999;
}

.rypage h1 p {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  font-family: HELVETICANEUELTPRO-THEX, Arial;
  letter-spacing: 1px;
}

@media screen and (max-width: 480px) {
  .body img {
    max-width: 80%;
  }
}
</style>